<template>
  <div class="login">
    <div class="login-box">
      <el-card class="login-card">
        <h2 style="text-align: center; color: #303133; font-size: 23px">
          {{ systemName }}
        </h2>
        <el-form
          :model="loginForm"
          :rules="loginFormRules"
          ref="loginForm"
          style="margin-top: 40px"
        >
          <el-form-item prop="username">
            <el-input
              class="item-input"
              v-model="loginForm.username"
              placeholder="用户名"
              prop=""
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              show-password
              class="item-input"
              v-model="loginForm.password"
              placeholder="密码"
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              @click="handlerLogin('loginForm')"
              style="width: 100%"
              type="primary"
              :loading="loading"
            >
              <span v-if="!loading">登录</span>
              <span v-else>登陆中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginPage",
  data() {
    return {
      systemName: process.env.VUE_APP_SYSTEM_NAME,
      loginForm: {
        username: "",
        password: "",
      },
      loading: false,
      loginFormRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入用户名" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { min: 6, trigger: "blur", message: "密码长度不能少于6位" },
        ],
      },
    };
  },
  methods: {
    handlerLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("user/login", this.loginForm).then(
            () => {
              const redirect = this.$route.query.redirect;
              this.$router.replace(redirect ? redirect : "/");
              this.loading = false;
            },
            () => {
              this.loading = false;
            }
          );
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  background: url("../../assets/images/login-bg.jpg") no-repeat center right;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .login-card {
    border-radius: 17px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.1);
  }
  .login-bottom {
    width: 100%;
    font-size: 10px;
    text-align: center;
    position: fixed;
    bottom: 10px;
  }
  .item-input {
    height: 48px;
    width: 338px;
  }
}
</style>
